<template>
  <view class="order-container">

    <!-- 搜索区域 -->
    <view class="search-section">
      <view class="search-box">
        <text class="search-icon">🔍</text>
        <input 
          class="search-input" 
          placeholder="输入订单号进行搜索" 
          v-model="searchKeyword"
          @input="handleSearch"
          type="digit"
        />
      </view>
      <button class="search-btn">搜索</button>
    </view>

    <!-- 订单数量显示 -->
    <view class="order-count">
      共{{ filteredOrders.length }}条
      <text class="dropdown-icon">▼</text>
    </view>

    <!-- 状态筛选区域 -->
    <view class="filter-section">
      <view 
        class="filter-item"
        :class="{ active: currentStatus === '' }"
        @click="switchStatus('')"
      >
        全部
      </view>
      <view 
        class="filter-item"
        :class="{ active: currentStatus === 1 }"
        @click="switchStatus(1)"
      >
        待服务
      </view>
      <view 
        class="filter-item"
        :class="{ active: currentStatus === 2 }"
        @click="switchStatus(2)"
      >
        已完成
      </view>
    </view>

    <!-- 订单列表 -->
    <view class="order-list">
      <view class="order-item" v-for="(order, index) in filteredOrders" :key="index">
        <!-- 订单头部 -->
        <view class="order-header">
          <text class="order-number">订单号: {{ order.id }}</text>
          <text class="order-amount">¥{{ order.price ? order.price.toFixed(2) : '0.00' }}</text>
        </view>
        
        <!-- 订单信息 -->
        <view class="order-info">
          <view class="info-row">
            <text class="info-label">下单用户:</text>
            <text class="info-value">{{ order.createBy || '未知用户' }}</text>
            <text class="phone-icon" @click="makePhoneCall(order.createBy || '未知用户')">📞</text>
          </view>
          
          <view class="info-row">
            <text class="info-label">预约时间:</text>
            <text class="info-value">{{ order.reservationTime || '' }}</text>
          </view>
          
          <view class="info-row">
            <text class="info-label">服务项目:</text>
            <text class="info-value">{{ order.name || '' }}</text>
          </view>
          
          <view class="info-row">
            <text class="info-label">下单时间:</text>
            <text class="info-value">{{ order.orderTime || '' }}</text>
          </view>
        </view>
        
        <!-- 操作按钮 - 放置在右下角 -->
        <view style="text-align: right; margin-top: 20rpx; padding-bottom: 50rpx;">
          <button class="detail-btn" @click="viewOrderDetail(order)">查看详情</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import  request  from '@/utils/request';

// 定义订单类型
interface OrderItem {
  id: number;
  orderId: string;
  name: string;
  createBy: string;
  createTime: string;
  orderTime: string;
  payTime: string;
  reservationTime: string;
  price: number;
  status: number;
  type: string;
  verificationCode?: string;
}

// 状态管理
const searchKeyword = ref('');
const currentStatus = ref<string | number>('');

// 订单数据
const orders = ref<OrderItem[]>([]);

// 根据状态获取显示文本
const getStatusText = (status: number): string => {
  switch (status) {
    case 1:
      return '待服务';
    case 2:
      return '已完成';
    default:
      return '未知状态';
  }
};

// 计算过滤后的订单列表
const filteredOrders = computed(() => {
  return orders.value.filter(order => {
    // 只显示status为3或4的订单
    if (order.status !== 3 && order.status !== 4) {
      return false;
    }
    
    // 搜索关键词过滤
    const orderIdStr = order.id.toString();
    const matchesSearch = searchKeyword.value ? orderIdStr.includes(searchKeyword.value) : true;
    
    // 状态过滤
    const matchesStatus = !currentStatus.value || String(order.status) === String(currentStatus.value);
    
    return matchesSearch && matchesStatus;
  });
});

// 切换订单状态
const switchStatus = (status: string | number) => {
  // 确保类型安全
  currentStatus.value = status;
};

// 处理搜索
const handleSearch = () => {
  // 搜索逻辑已在computed中实现
};

// 查看订单详情
const viewOrderDetail = (order: OrderItem) => {
  console.log('查看订单详情:', order);
  // 跳转到核销操作页面并传递完整的order对象
  uni.navigateTo({
    url: `/pages/verification/verification?orderId=${order.orderId}`,
    success: function(res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit('acceptOrderData', { order: order });
    }
  });
};
// 拨打电话
const makePhoneCall = (userName: string) => {
  uni.showModal({
    title: '拨打电话',
    content: `是否拨打${userName}的电话？`,
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: '10086', // 模拟电话号码
          fail: () => {
            uni.showToast({
              title: '拨打失败',
              icon: 'none'
            });
          }
        });
      }
    }
  });
};

// 返回上一页
const handleBack = () => {
  uni.navigateBack();
};

//获取订单数据
const getOrders = async () => {
  // 显示加载提示
  uni.showLoading({
    title: '加载中...'
  });
  request({
    url: '/wsy/order/list',
    method: 'GET',
    data: {
      mId: 2 // 传递商户ID参数
    }
  }).then((res) => {
    // 隐藏加载提示
    uni.hideLoading();
    // 数据获取完成后，更新订单列表
    console.log('订单数据:', res);
    // 确保res是数组格式
    orders.value = Array.isArray(res) ? res : [];
  }).catch((error) => {
    console.error('获取订单数据失败:', error);
  });
}
onMounted(() => {
  getOrders();
});

</script>

<style lang="scss" scoped>
.order-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 页面头部 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120rpx;
  padding: 0 30rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #eeeeee;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-left,
.header-right {
  width: 60rpx;
  text-align: center;
}

.back-icon {
  font-size: 48rpx;
  color: #333333;
}

.more-icon {
  font-size: 24rpx;
  color: #333333;
}

.header-title {
  font-size: 36rpx;
  color: #333333;
  font-weight: 600;
}

/* 搜索区域 */
.search-section {
  display: flex;
  padding: 30rpx;
  background-color: #ffffff;
  margin-bottom: 10rpx;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 30rpx;
  padding: 0 30rpx;
  margin-right: 20rpx;
}

.search-icon {
  font-size: 30rpx;
  color: #999999;
  margin-right: 10rpx;
}

.search-input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  color: #333333;
  background-color: transparent;
}

.search-btn {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  color: #ffffff;
  background-color: #1989fa;
  border-radius: 30rpx;
  border: none;
}

/* 订单数量 */
.order-count {
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  font-size: 28rpx;
  color: #666666;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-icon {
  font-size: 24rpx;
  color: #999999;
}

/* 状态筛选 */
.filter-section {
  display: flex;
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  margin-bottom: 10rpx;
  border-top: 1rpx solid #f0f0f0;
}

.filter-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666666;
  padding: 10rpx 0;
  position: relative;
}

.filter-item.active {
  color: #1989fa;
}

.filter-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background-color: #1989fa;
  border-radius: 3rpx;
}

/* 订单列表 */
.order-list {
  background-color: #ffffff;
  padding: 0 30rpx;
}

.order-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.order-item:last-child {
  border-bottom: none;
}

/* 订单头部 */
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.order-number {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}

.order-amount {
  font-size: 32rpx;
  color: #ff4d4f;
  font-weight: 600;
}

/* 订单信息 */
.order-info {
  margin-bottom: 20rpx;
  width: 100%;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 26rpx;
  color: #666666;
  width: 160rpx;
}

.info-value {
  flex: 1;
  font-size: 26rpx;
  color: #333333;
}

.phone-icon {
  font-size: 28rpx;
  margin-left: 10rpx;
  cursor: pointer;
}

/* 操作按钮 */
.order-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20rpx;
  width: 100%;
  margin-bottom: 10rpx;
  padding-left: 0;
}

.detail-btn {
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  color: #1989fa;
  background-color: #e6f7ff;
  border-radius: 30rpx;
  border: none;
  float: right;
}
</style>